<template>
  <div class="page">
    <wv-group title="派送模式">
       <wv-cell title="选择派送模式" is-link :value="ticket | pickerValueFilter" @click.native="ticketPickerShow = true" />
    </wv-group>

    <wv-group title="取货时间">
      <wv-cell title="选择取货时间" is-link :value="dayAndTime | pickerValueFilter" @click.native="dayPickerShow = true" />
    </wv-group>

    <wv-picker
      :visible.sync="fruitPickerShow"
      :columns="fruitColumns"
      value-key="name"
      @confirm="confirmPerson"
    />
    <wv-picker
      :visible.sync="ticketPickerShow"
      v-model="ticket"
      :columns="ticketColumns"
      @confirm="confirmTicket"
    />
    <wv-picker
      :visible.sync="dayPickerShow"
      :columns="dayColumns"
      @confirm="confirmDayTime"
    />
    <wv-picker
      :visible.sync="addressPickerShow"
      v-model="address"
      ref="addressPicker"
      :columns="addressColumns"
      :visible-item-count="5"
      @change="onAddressChange"
      @confirm="confirmAddress"
    />
  </div>
</template>

<script>
import chinaAreaData from 'china-area-data'
import { Picker } from 'we-vue'
const provinces = Object.values(chinaAreaData[86])

// 获取某一省下的市
const getCities = (province) => {
  let provinceCode
  for (let i in chinaAreaData[86]) {
    if (province === chinaAreaData[86][i]) {
      provinceCode = i
      break
    }
  }
  return typeof chinaAreaData[provinceCode] === 'object' ? Object.values(chinaAreaData[provinceCode]) : []
}

// 获取某一市下的区/县
function getAreas (province, city) {
  let provinceCode, cityCode
  for (let i in chinaAreaData[86]) {
    if (province === chinaAreaData[86][i]) {
      provinceCode = i
      break
    }
  }

  for (let i in chinaAreaData[provinceCode]) {
    if (city === chinaAreaData[provinceCode][i]) {
      cityCode = i
      break
    }
  }

  if (chinaAreaData[cityCode]) {
    return typeof chinaAreaData[cityCode] === 'object' ? Object.values(chinaAreaData[cityCode]) : []
  } else {
    // 只有两级的情况
    return []
  }
}

export default {
  name: 'Timepick',
  components: {
    Picker
  },
  data () {
    return {
      ticketValue: [],
      dayValue: [],
      fruitPickerShow: false,
      ticketPickerShow: false,
      dayPickerShow: false,
      addressPickerShow: false,
      ticket: ['普通派送'],
      dayAndTime: [],
      address: [],
      fruit: [{name: 'Apple', age: 1}],
      fruitColumns: [
        {
          values: [
            {
              name: 'Apple',
              price: 1.3
            },
            {
              name: 'Banana',
              price: 2.0
            },
            {
              name: 'Orange',
              price: 10
            },
            {
              name: 'Pear',
              price: 0.5
            }
          ]
        }
      ],
      ticketColumns: [
        {
          values: [
            '专人派送',
            '普通派送'
          ],
          defaultIndex: 2
        }
      ],
      dayColumns: [
        {
          values: [
            '今天',
            '明天',
            '后天'
          ],
          defaultIndex: 0
        },
        {
          values: [
            '立即取货',
            '00时',
            '01时',
            '02时',
            '03时',
            '04时',
            '05时',
            '06时',
            '07时',
            '08时',
            '09时',
            '10时',
            '11时',
            '12时',
            '13时',
            '14时',
            '15时',
            '16时',
            '17时',
            '18时',
            '19时',
            '20时',
            '21时',
            '22时',
            '23时'
          ],
          defaultIndex: 0
        },
        {
          values: [
            '00分',
            '10分',
            '20分',
            '30分',
            '40分',
            '50分',
            '60分'
          ],
          defaultIndex: 0
        }
      ],
      addressColumns: [
        {
          values: provinces
        },
        {
          values: getCities('湖北省')
        },
        {
          values: getAreas('湖北省', '宜昌市')
        }
      ]
    }
  },
  created () {
    this.ticket[0] = this.$store.state.sendMethod
    this.dayAndTime[0] = this.$store.state.getGoodTime
  },
  mounted () {
    this.$nextTick(() => {
      this.$refs.addressPicker.setValues(['湖北省', '宜昌市', '长阳土家族自治县'])
    })
  },

  methods: {
    onChange (picker, value) {
      console.log(value)
    },

    confirmPerson (picker) {
      this.fruit = picker.getValues()[0]
    },

    confirmTicket (picker) {
      this.ticket = picker.getValues()
      console.log(this.ticket[0])
      this.$store.commit('changeSendMethod', this.ticket[0])
    },

    confirmDayTime (picker) {
      this.dayAndTime = picker.getValues()
      console.log(this.dayAndTime[0] + ',' + this.dayAndTime[1] + ',' + this.dayAndTime[2])
      this.$store.commit('changeGoodTime', this.dayAndTime[0] + ',' + this.dayAndTime[1] + ',' + this.dayAndTime[2])
    },

    onAddressChange (picker, addressValues, slotIndex) {
      if (slotIndex === 0) {
        const cities = getCities(addressValues[0])
        picker.setColumnValues(1, cities)
        picker.setColumnValues(2, getAreas(addressValues[0], cities[0]))
      } else if (slotIndex === 1) {
        picker.setColumnValues(2, getAreas(addressValues[0], addressValues[1]))
      }
    },

    confirmAddress (picker) {
      this.address = picker.getValues()
    }
  },

  filters: {
    pickerValueFilter (val) {
      if (Array.isArray(val)) {
        return val.toString()
      } else {
        return '请选择'
      }
    }
  }
}
</script>

<style scoped lang="scss">
</style>
